<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iPad</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3241864_y5olqh57uek.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/footer.css">
    <style>
        html {
            font-size: 48px;
            --iphone-black-bg: #000;
            --iphone-black-text: #f2f2f2;
            --iphone-white-bg: #fff;
            --iphone-white-text: #8b8b99;
            --iphone-white-text-highlight: #1d1d1f;
            --iphone-red-bg: #960b19;
            --iphone-red-text: #e57571;
            --iphone-red-text-highlight: #f5f5f7;
            --iphone-width: 460px;
            --iphone-offscreen: -720px;
        }
        
        body {
            margin: 0;
            height: 4000px;
            font-family: Helvetica;
            background-color: #000;
        }
        
        .sticky-container {
            position: sticky;
            top: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        
        .sticky-container .iphone {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .sticky-container .iphone h3 {
            font-size: 1rem;
            margin: 0 0 60px 0;
            width: var(--iphone-width);
        }
        
        .sticky-container .iphone img {
            display: block;
            width: var(--iphone-width);
            margin-bottom: var(--iphone-offscreen);
        }
        
        .sticky-container .iphone.black {
            background-color: var(--iphone-black-bg);
            z-index: 10;
        }
        
        .sticky-container .iphone.black h3 {
            color: var(--iphone-black-text);
        }
        
        .sticky-container .iphone.white {
            background-color: var(--iphone-white-bg);
            z-index: 20;
            clip-path: inset(100% 0px 0px 0px);
        }
        
        .sticky-container .iphone.white h3 {
            color: var(--iphone-white-text);
        }
        
        .sticky-container .iphone.white h3 span {
            color: var(--iphone-white-text-highlight);
        }
        
        .sticky-container .iphone.red {
            background-color: var(--iphone-red-bg);
            z-index: 30;
            clip-path: inset(100% 0px 0px 0px);
        }
        
        .sticky-container .iphone.red h3 {
            color: var(--iphone-red-text);
        }
        
        .sticky-container .iphone.red h3 span {
            color: var(--iphone-red-text-highlight);
        }
        
        .sticky-container.no-sticky {
            position: relative;
            overflow: visible;
        }
        
        .sticky-container.no-sticky .iphone {
            position: relative;
        }
        
        .sticky-container.no-sticky .iphone.red {
            padding-bottom: calc(var(--iphone-offscreen) * -1);
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav id="global-nav">
        <ul class="header">
            <li class="nav-item">
                <a href="../index.html" class="nav-link iconfont icon-apple-fill"> </a>
            </li>
            <li class="nav-item"><a href="./store.html" class="nav-link">Store</a></li>
            <li class="nav-item"><a href="./mac.html" class="nav-link">Mac</a></li>
            <li class="nav-item"><a href="./ipad.html" class="nav-link">iPad</a></li>
            <li class="nav-item"><a href="iphonese.html" class="nav-link">iPhone</a></li>
            <li class="nav-item"><a href="./iphone13.html" class="nav-link">Watch</a></li>
            <li class="nav-item"><a href="#" class="nav-link">AirPods</a></li>
            <li class="nav-item"><a href="homepod.html" class="nav-link">TV & Home</a></li>
            <li class="nav-item"><a href="./niublity.html" class="nav-link">Only on Apple </a></li>
            <li class="nav-item"><a href="#" class="nav-link">Accessories</a></li>
            <li class="nav-item"><a href="./niublity.html" class="nav-link">Support</a></li>
            <li class="nav-item">
                <a href="#" class="nav-link iconfont icon-search "> </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link iconfont icon-bag "> </a>
            </li>
        </ul>
    </nav>


    <div class="sticky-container">
        <div class="iphone black">
            <h3>
                Comes in Black.<br> &nbsp;
            </h3>
            <img src="https://www.apple.com/v/iphone-se/b/images/overview/finishes_black__b06syayq94wi_medium_2x.png">
        </div>
        <div class="iphone white">
            <h3>
                Comes in Black.<br>
                <span>White</span>
            </h3>

            <img src="https://www.apple.com/v/iphone-se/b/images/overview/finishes_white__drv9fwq9vzwy_medium_2x.png">
        </div>
        <div class="iphone red">
            <h3>
                Comes in Black.<br> White. <span>And Pow.</span>
            </h3>

            <img src="https://www.apple.com/v/iphone-se/b/images/overview/finishes_red__eqfv1ongy282_medium_2x.png">
        </div>
    </div>

    <!-- 页脚 -->
    <footer id="global-footer">
        <div class="footer-content">
            <div class="breadcrumbs">
                <a href="#" class="iconfont icon-apple-fill"></a>
                <ul class="paths">
                    <li class="path-item iconfont">
                        <span> Apple Store Online</span>
                    </li>
                    <li class="path-item iconfont">
                        <span> Apple Arcade</span>
                    </li>
                </ul>
            </div>

            <nav class="footer-list">
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>

            </nav>

            <div class="footer-info">
                <div class="shop"> More ways to shop: <a class="blue-link" href="#">Find an Apple Store</a> or <a class="blue-link" href="#">other retailer</a> near you. Or call 1‑800‑MY‑APPLE.</div>
                <div class="legal">
                    <div class="copyright">
                        Copyright © 2022 Apple Inc. All rights reserved.
                    </div>
                    <div class="links">
                        <a href="">Privacy Policy</a>
                        <a href="">Terms of Use</a>
                        <a href=""> Sales and Refunds</a>
                        <a href="">Legal</a>
                        <a href="">Site Map</a>
                    </div>
                    <div class="locale">United State</div>
                </div>
            </div>
        </div>
    </footer>
    <script>
        window.addEventListener('scroll', (e) => {
            let noStickyOffset = document.documentElement.clientHeight * 2
            let scrolled = document.documentElement.scrollTop / noStickyOffset

            let $white = document.querySelector('.white')
            let $red = document.querySelector('.red')

            $white.style.clipPath = `inset(${((0.5 - scrolled) / 0.5) * 100}% 0px 0px 0px)`
            $red.style.clipPath = `inset(${((1 - scrolled) / 0.5) * 100}% 0px 0px 0px)`

            if (scrolled >= 1) {
                document.querySelector('.sticky-container').classList.add('no-sticky')
            } else {
                document.querySelector('.sticky-container').classList.remove('no-sticky')
            }
        })
    </script>
</body>

</html>